<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<link rel="stylesheet" type="text/css" href="${base}/css/common/base.css?v=2">
 <link rel="stylesheet" type="text/css" href="${base}/css/common/icon.css?v=2">
<link rel="stylesheet" type="text/css" href="${base}/css/common/common.css?v=3">

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="${base}/css/plugin/jquery-easyui/1.3.4/themes/metro/easyui.css">
<script type="text/javascript" src="${base}/js/plugin/jquery-easyui/1.3.4/jquery.easyui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/2.0.1/pivot.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/pivottable/2.0.1/pivot.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/2.0.2/tips_data.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/2.0.2/c3_renderers.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript" src="${base}/js/plugin/jqueryUI/1.9.2/i18n/jquery.ui.datepicker-zh-CN.js"></script>
<link rel="stylesheet" type="text/css" href="${base}/css/plugin/jqueryUI/1.9.2/themes/ui-lightness/jquery-ui.css">

<script type="text/javascript" src="${base}/js/common/common.js"></script>
<script>
var renderers = {'表格':$.pivotUtilities.renderers.Table};
renderers.热点图 = $.pivotUtilities.renderers.Heatmap;
renderers['列-热点图'] = $.pivotUtilities.renderers['Col Heatmap'];
renderers['行-热点图'] = $.pivotUtilities.renderers['Row Heatmap'];
renderers['表格柱状图'] = $.pivotUtilities.renderers['Table Barchart'];
renderers['面积'] = $.pivotUtilities.c3_renderers['Area Chart'];
renderers['柱状图'] = $.pivotUtilities.c3_renderers['Bar Chart'];
renderers['直线图'] = $.pivotUtilities.c3_renderers['Line Chart'];
renderers['散点图'] = $.pivotUtilities.c3_renderers['Scatter Chart'];
renderers['堆叠长条图'] = $.pivotUtilities.c3_renderers['Stacked Bar Chart']; 

(function ($) {
	$.fn.pivotView  = function(op,data){ 
		var $view = $(this);
		var $table = $(this).find('.pivotTable');
		var setting =  $view.data('setting');
		var rows = $view.data('rows');	
		if(op=="init"){ 
			$view.data('setting',data);	 
			setting =  $view.data('setting');
			var html = "";
			html += '<div>'
			var searchHtml = "";
			for(var i = 0;i<setting.column.length;i++){
				var column = setting.column[i];
				if(column.search){
					if(column.type=="date"){
						searchHtml += '<span class="search-item">  '+column.title+'：<input name="date_start_'+column.field+'" type="text">至<input name="date_end_'+column.field+'" type="text"> </span>';
						continue;
					}
					searchHtml += '<span class="search-item">  '+column.title+'：<input name="'+column.field+'" type="text"> </span>'	
				}
			}
			if(searchHtml!=""){
				html += '<div  class="search_bar"><form id="search_form" onsubmit="return false;"><div class="search-row">' + searchHtml +' <input class="search_btn" type="button" value="新窗口打开"></div></form></div>';
			}
	 		html += '<div class="pivotTable"></div></div>';
	 		$view.empty().append(html);
	 		$table =  $view.find('.pivotTable');
	 		$view.find('.search_btn').click(function(){
	 			window.open(window.location);
	 		});
	 		$view.find('input').each(function(){
	 			var name =$(this).attr('name');
	 			if(name!=null && name!="" && name.indexOf('date')>=0){
	 				$(this).datepicker();
	 			};
	 		});
	 		$view.find('input').keyup(function(){
	 			$view.pivotView('filter'); 
	 		});
	 		$view.find('input').change(function(){
	 			$view.pivotView('filter'); 
	 		});
			$.messager.progress({
				title:'请稍等片刻',
				msg:' 正在查询数据.'
			});
			$.getJSON(setting.url,function(res){
				$.messager.progress('close');
				$view.data('rows',res.data);	
				rows = $view.data('rows');
				wirteHtml(rows);
			 }); 
		} 
		
		if(op=="filter"){
			filter();
		}
		
		
		
		function wirteHtml(data){ 
			var column = setting.column;
			var url = setting.url;
			 		
			var  pivotData = [];
			var head = [];
			for(var i =0 ;i<column.length;i++){
				 head.push(column[i].title);
			}
			pivotData.push(head); 
			 for(var i =0 ;i<data.length;i++){
				 var row = data[i];
				 var pivotItem = [];
				 for(var j =0 ;j<column.length;j++){
					 var value = row[column[j].field];
					 if(value==null){
						 if(column[j].type=="number"){
								value = 0; 
						 }else{
							    value = "";
						 }
						  
					 }
					 pivotItem.push(value);
				 }
				pivotData.push(pivotItem);
			 }
			 if(pivotData.length==1){
				 pivotData = [];
			 }
			 $table.pivotUI(
			 		 pivotData , {
			 		    rows: head,
			 		    cols: [],
			 		    aggregatorName: "Count",
			 		    rendererName: "表格",
			 		    renderers: $.extend(
			 		    		renderers,{}
			 		    )
			  },true);
			 $('.pvtFilterBox').each(function(){
				var $box = $(this);
				var $buttons = $box.find('button');
				var $input = $(this).find('input');
				$($input[0]).attr('placeholder','可输入过滤下列结果')
				$($buttons[0]).html("选择全部");
				$($buttons[1]).html("取消全选");
				$($buttons[2]).html("确定过滤");
				$($buttons[2]).parent().append('<button>关闭窗口</button>');
				$buttons = $box.find('button');
				$($buttons[3]).click(function(){
					$box.hide();
				});
			 });
		}
		function filter(){
			var searchInfo = $view.getAllData();
			var result = [];
			for(var i = 1 ;i<rows.length;i++){
				var row = rows[i];
				//遍历列
				var allowPass = true;
				var timeOk = true;
				for(key in searchInfo){
					 var searchValue = searchInfo[key];
					 var rowValue = row[key];
					 if(searchValue!=null&&searchValue!=""){
						 if(key.indexOf('date')>=0){
							 var dateKey = key.split('_');
							 rowValue = row[dateKey[2]];
							 if(dateKey[1]=='start'){
								 searchValue += " 00:00:00";
								 if(compareTime(rowValue,searchValue)>0){
									 timeOk = false;
									 break;
								 }
							 }else{
								 searchValue += " 23:59:59"
								 if(compareTime(rowValue,searchValue)<0){  
									 timeOk = false;
									 break;
								 }
							 }
							 break;
						 }
						 
						 if(rowValue.indexOf(searchValue)<0){
							 allowPass = false;
							 break;
						 }
					 }
				}
				if(allowPass&&timeOk){
					result.push(row);
				} 
			};
			wirteHtml(result);
		}
	};
})(jQuery);  
function compareTime(beginTime,endTime) {
    var beginTimes = beginTime.substring(0, 10).split('-');
    var endTimes = endTime.substring(0, 10).split('-');
    beginTime = beginTimes[1] + '-' + beginTimes[2] + '-' + beginTimes[0] + ' ' + beginTime.substring(10, 19);
    endTime = endTimes[1] + '-' + endTimes[2] + '-' + endTimes[0] + ' ' + endTime.substring(10, 19);

    //alert(beginTime + "aaa" + endTime);
    //alert(Date.parse(endTime));
    //alert(Date.parse(beginTime));
    var a = (Date.parse(endTime) - Date.parse(beginTime)) / 3600 / 1000;
    if (a < 0) {
       return -1;
    } else if (a > 0) {
    	return 1;
    } else if (a == 0) {
    	return 0;
    } else {
        return 'exception'
    }
}
</script>
 